<template>
  <div>
    <div>
      <a-button type="primary" @click="toOpen(0,1)">添加权限</a-button>
      <div>
          <a-table
            :columns="columns"
            :data-source="state.powerList"
          > 
            <!-- 表头部的插槽 -->
              <template #headerCell="{}">
            
              </template>
            <!-- 表格的插槽 -->
               <template #bodyCell="{column,record}">
                <!-- 操作 -->
                  <span v-if="column.key=='action'">
                      <a-button @click="toOpen(record.id,2)"  type="link" primary>添加</a-button>  
                      <a-button type="link" @click="toEdit(record.id)">编辑</a-button>  
                       <a-popconfirm
                          title="你确定删除本权限吗?"
                          ok-text="确定"
                          cancel-text="取消"
                          @confirm="toDel(record.id)"
                         
                        >
                      <a-button  type="link" danger>删除</a-button>  
                   </a-popconfirm>
                  </span>  
              </template>


          </a-table>
          <!-- 添加弹出层 -->
           <a-modal v-model:open="open" :title="title" @ok="handleOk">

              <a-form :model="formState"
                ref="myperForm"
                 >
                  <a-form-item label="权限名称"
                  :rules="[{required:true,message:'名称必填'}]">
                      <a-input v-model:value="formState.name" />
                  </a-form-item>
                  <a-form-item label="权限标识"
                  :rules="[{required:true,message:'编码必填'}]">
                      <a-input v-model:value="formState.code" />
                  </a-form-item>
                  <a-form-item label="权限描述"
                   :rules="[{required:true,message:'权限必填'}]">
                      <a-input v-model:value="formState.description" />
                  </a-form-item>
                   <a-form-item label="是否启用">
                        <a-switch v-model:checked="formState.enVisible"  />
                  </a-form-item>
              </a-form>

            <template #footer>
              <a-button key="back" @click="handleCancel">取消</a-button>
              <a-button key="submit" type="primary" :loading="loading" @click="handleOk">确定</a-button>
            </template>
          </a-modal>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
    import type { TableProps } from 'ant-design-vue';
    import {ref,reactive,toRefs,watch} from 'vue'
    import {getPermissionList,addPermission,delPermission,getPermissionDetail,updatePermission} from '../../api/power.ts'
    import {toTree} from '../../utils/tool.ts'
    import {message} from 'ant-design-vue'
    let title=ref("添加权限");
      // 表格的数据
      let state=reactive({
        powerList:[],
        formState:{
          code:"",
          description:"",
          enVisible:false, 
          name:"",
          pid:0,
          type:1 //
        }
      })
      const columns = [
        {
          title: '名称',
          dataIndex: 'name',
          sorter: true,
          width: '20%',
        },
        {
          title: '标识',
          dataIndex: 'code',
         
          width: '20%',
        },
        {
          title: '描述',
          dataIndex: 'description',
        },
       {  
          key:"action",
          title: '操作',
          dataIndex: 'email',
        },
      ];

      
      // 获取权限列表接口
      let getPower=async ()=>{
        let res=await getPermissionList()
        console.log(res,'_-------')
        state.powerList=toTree(res);
      }
      getPower();

      // 弹出层需要的数据和事件
      let open=ref<boolean>(false);
      // 监听弹出层的关闭 关闭后情况表单 和 修改标题
      watch(open,(newVal)=>{
          if(!newVal){
            state.formState={
                code:"",
                description:"",
                enVisible:false, 
                name:"",
                pid:0,
                type:1 //
            }
            title.value="添加权限"
          }
      })
      let myperForm=ref()
      let handleOk= ()=>{
          if(state.formState.enVisible){
            state.formState.enVisible="1"
          }else{
              state.formState.enVisible="0"
          }
          myperForm.value.validate().then(async ()=>{
            if(state.formState.id){
              // 编辑接口
                let editRes=await updatePermission(state.formState)
                 message.success("编辑成功")
            }else{
                  let res=await addPermission(state.formState)
                  console.log(res,"----------")
                  message.success("添加成功")
            }
          
              open.value=false;
              getPower();
              myperForm.value.resetFields();
          })
      }
      // 点击添加 
      let toOpen=(pid,type)=>{
          open.value=true;//打开弹出层
          state.formState.pid=pid;//接口需要的pid
          state.formState.type=type//接口需要的type
      }     
      // 删除接口
      let toDel=async (id)=>{
        let res=await delPermission(id)
        message.success("删除成功")
        getPower();
      }
      // 点击编辑按钮 调用获取当前详情接口 做回显
      let toEdit=async (id)=>{
          open.value=true
          title.value="编辑权限"

          let res=await getPermissionDetail(id)
          console.log(res);

          state.formState=res;
          delete state.formState.createTIme
          delete state.formState.update_time
          state.formState.enVisible=res.enVisible=="1"?true:false
      }

      let {formState}=toRefs(state)
</script> 
